<template>
  <h1>简单K线图</h1>
  <hr />
  <p class="xlfx" style="text-align: center; font-size: 25px">销量分析K线图</p>
  <div id="main" style="width: 100%; height: 80%"></div>
  <!-- <div ref="main" style="width: 100%; height: 80%"></div> -->
</template>

<script setup lang="ts">
// 导入echats
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import service from "../../../utils/service";

// const main = ref();

onMounted(() => {
  getDataList()
});

// 获取图表数据
const getDataList = () => {
  service({
    url: "data/kData",
  }).then((res: any) => {
    if (res.data.code === "200") {
      arrx.push(...res.data.data.x)
      arry.push(...res.data.data.val)
    }
  }).then(() => {
    initEcgarts() //数据更新后调用initeCharts()
  })
};
// getDataList();

const arrx: any = []
const arry: any = []
console.log("arrx", arrx)
console.log("arry", arry)

const initEcgarts = () => {
  // const myChart = echarts.init(main.value);
  const myChart = echarts.init(document.getElementById('main') as HTMLElement);
 let  option = {
    title: {
      text: 'Stacked Line'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      // type: 'category',
      boundaryGap: false,
      data: arrx,
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: arry[0]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: arry[1]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: arry[2]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        data: arry[3]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: arry[4]
      }
    ]
  };
  option && myChart.setOption(option);
};
</script>

<style></style>